<template>
  <div class="infowrap infowrap3">
    <el-dialog
      v-model="dialogVisible"
      title="农事操作"
      width="1125px"
      custom-class="diyclass"
    >
      <div class="zywrap zywrapfarm">
        <div class="mcontent mcontent2">
          <div class="mchild">
            <div class="label">
              <span class="reddian">*</span>
              作业地块:</div>
            <el-select
              v-model="form.value.gardenId"
              class="m-2"
              placeholder="请选择"
              size="default"
            >
              <el-option
                v-for="(item) in plotOptionList"
                :key="item.id"
                :label="item.plotName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="mchild">
            <div class="label"><span class="reddian">*</span>作业类型:</div>
            <el-select
              v-model="form.value.content"
              class="m-2"
              placeholder="请选择"
              size="default"
              @change="typeChange2"
            >
              <el-option
                v-for="(item,index) in typeOption"
                :key="index"
                :label="item" :value="item" />
             
            </el-select>
          </div>
          <div class="mchild" v-if="sgHandleFlag">
            <div class="label"><span class="reddian">*</span>采集数量:</div>
            <el-input v-model="form.value.collectCount" placeholder="请输入" clearable />
          </div>
          <!-- <div class="mchild">
            <div class="label">面积(亩):</div>
            <el-input type="number" v-model="form.value.usingArea" placeholder="请输入" clearable />
          </div> -->
          <div class="mchild" v-if="!sgHandleFlag">
            <div class="label labelflex">
              <div>
                <span class="reddian">*</span>农资使用:
              </div>
              <div class="addbtnadd" @click="dialogVisible2=true">
                <el-icon><CirclePlus /></el-icon>
              </div>
            </div>
            <div class="graycontent">
              <div class="gchildadd" v-for="(item,index) in form.value.materialDetails" :key="index">
                    <div>
                      {{ item.farmResourceName }}/用量:{{ item.dosage }}/花费:{{ item.price }}
                    </div>
                    <div class="deletenz" @click="deleteSmall(index)">
                      <el-icon><CircleClose /></el-icon>
                    </div>
              </div>
            </div>
          </div>
          <div class="mchild">
            <div class="label"><span class="reddian">*</span>人工数量:</div>
            <el-input type="number" v-model="form.value.workerCount" placeholder="请输入" clearable />
          </div>
          
        </div>
        <div class="mcontent">
          
          <div class="mchild">
            <div class="label">人工总费用:</div>
            <el-input type="number" v-model="form.value.humanCost" placeholder="请输入" clearable />
          </div>
          <div class="mchild">
            <div class="label"><span class="reddian">*</span>作业时间:</div>
            <div class="datewrap datewrap2">
              <div class="ksdiv">
                开始时间
              </div>
                <el-date-picker
                v-model="form.value.startTime"
                type="date"
                placeholder="请选择时间" 
              />
              <div class="zhi">
                至
              </div>
              <div class="ksdiv">
                结束时间
              </div>
              <!-- value-format="yyyy-MM-dd" -->
                <el-date-picker
                v-model="form.value.endTime"
                type="date"
                placeholder="请选择时间"
              />
            </div>
          </div>
          <div class="mchild">
            <div class="label">作业备注:</div>
            <div class="picset">
              <el-input
                v-model="form.value.comment"
                maxlength="100"
                placeholder="请输入内容"
                show-word-limit
                type="textarea"
              />
            </div>
          </div>
          <div class="mchild">
            <div class="label">作业照片(最多三张):</div>
            <div class="picset">
              <div class="picwraps" v-for="(item,index) in form.value.picUrls" :key="index">
                <div class="closepic" @click="deletePic(index)">
                  <el-icon><RemoveFilled /></el-icon>
                </div>
                <img  
                :src="baseUrl+item" class="xgsmall" alt="" />
              </div>
              <!-- :multiple="true" -->
              <el-upload
                      
                        
                        accept=".png,.jpg,.jpeg"
                        :before-upload="beforeUpload"
                        :file-list="fileList"
                        :on-remove="handleRemove"
                      >
                      <div class="add" v-if="form.value.picUrls.length<3">
                        <el-icon :size="20" color="#fff"><CirclePlus /></el-icon>
                      </div>   
              </el-upload>

            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button :disabled="overFlag" @click="submit">保存</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogVisible2"
      title="添加使用农资"
      width="575px"
      custom-class="diyclass diyclassadd"
    >
    <div class="mcontent">
      <div class="mchild">
            <div class="label">农资类型:</div>
            <el-select
              v-model="smallForm.value.farmResourceCategoryId"
              class="m-2"
              @change="farmCateChange"
              placeholder="请选择"
              size="default"
            >
        
              <el-option
               v-for="(item,index) in getFarmResourceCateOption"
               :key="index"
               :label="item.categoryName" :value="item.id" />
              
            </el-select>
      </div>
      <div class="mchild">
            <div class="label">农资名称:</div>
            <el-select
              v-model="smallForm.value.farmResourceId" 
              class="m-2"
              placeholder="请选择"
              size="default"
              @change="smallChange"
            >
              <el-option
                v-for="(item) in farmResourceOption.value"
                :key="item.id"
                :label="item.farmResourceName"
                :value="item.id"
              />
            </el-select>
      </div>
      <div class="mchild">
            <div class="label">农资用量:</div>
            <el-input type="number" v-model="smallForm.value.dosage" placeholder="请输入" clearable />
      </div>
      <div class="mchild">
            <div class="label">农资花费:</div>
            <el-input type="number" v-model="smallForm.value.price" placeholder="请输入" clearable />
      </div>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button :disabled="overFlag2" @click="submitSmall">添加</el-button>
          <el-button type="primary" @click="dialogVisible2 = false">
            取消
          </el-button>
        </span>
    </template>
    </el-dialog>
  </div>
</template>
  
<script lang="ts">
import { ElMessage } from 'element-plus'
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
  toRefs,
  computed,
  toRef,
} from "vue";
import { post, get } from "@/public/request/api";
import moment from 'moment';
import Setting from "@/public/config"
export default defineComponent({
  components: {},
  props: {
    option: Array,
    farmResourceCateOption:Array,
  },
  setup(props,context) {
    let uploadUrl= Setting.HttpApiAddress+'/attachment/upload'
    let baseUrl=Setting.HttpApiAddress
    let overFlag=computed({
          get(){
            if(form.value.content=='收割'){
              if(
                form.value.collectCount&&
                form.value.endTime&&
                
                form.value.content&&
                form.value.gardenId&&
                form.value.startTime&&
                form.value.workerCount
              ){
                return false
              }else{
                return true
              }
            }else{
              if(
                form.value.endTime&&
                
                form.value.content&&
                form.value.gardenId&&
                form.value.startTime&&
                form.value.workerCount
              ){
                return false
              }else{
                return true
              }
            }
          },
          set(value){
          }
    })
    let overFlag2=computed({
          get(){
            if(smallForm.value.farmResourceCategoryId&&
              smallForm.value.price&&
              smallForm.value.dosage
            ){
              return false
            }else{
              return true
            }
          },
          set(value){
          }
    })
    let sgHandleFlag=ref(false)
    let smallForm=reactive({
      value:{
        farmResourceCategoryId:'',
        farmResourceId:'',
        dosage:'',
        price:'',
        farmResourceName:'',
      }
    })
    const state = reactive(props);
    let dialogVisible2=ref(false)
    const { option,farmResourceCateOption } = toRefs(state);
    //变量
    let plotOptionList = option;
    
    let getFarmResourceCateOption=farmResourceCateOption
    
    

    const form = reactive({
      value:{
        materialDetails:[],
       
        "collectCount": '',
        "endTime": "",
       
        "content": "",
        "picUrls": [],
        "gardenId": '',
        "comment": "",
        "startTime": "",
        "totalCost": '',
        humanCost:'',
        "usingArea": "",
        "workerCount": '',
        isInput:0,
        
      }
      
    });
    const dialogVisible = ref(false);
    const areaOptions = [
      {
        value: "",
        label: "地块1",
      },
      {
        value: "",
        label: "地块2",
      },
      {
        value: "",
        label: "地块3",
      },
    ];
    const manOptions = [
      {
        value: "",
        label: "李宁",
      },
      {
        value: "",
        label: "张三",
      },
    ];
    const typeOption=['耕地','播种','施肥','植保','灌溉','除虫除草','收割']
    let fileList = ref([]);
    const handleRemove =(file,files)=>{
        fileList.value = files;
    }
    let farmResourceOption=reactive({
      value:[]
    })
    function upload(){
      post('/attachment/upload',{
         
      }).then(res=>{
          
      })
    }
    function deleteSmall(index){
      form.value.materialDetails.splice(index,1)
    }
    function deletePic(index){
      form.value.picUrls.splice(index,1)
    }
    function farmCateChange(e){
      console.log(e);
      getFarmResourceOptionById(e)
      smallForm.value.farmResourceId=''
    }
    function getFarmResourceOptionById(id){
      get('/farmResource/options',{
        farmResourceCategoryId:id
      }).then(res=>{
        farmResourceOption.value=res.data
      })
    }
    function smallChange(e){
      let find=farmResourceOption.value.find(item=>{
        return item['id']==e
      })
      smallForm.value.farmResourceName=find.farmResourceName
    }
    function submit(){
      console.log(form.value);
      form.value.startTime=moment(form.value.startTime).format("YYYY-MM-DD");
      form.value.endTime=moment(form.value.endTime).format("YYYY-MM-DD");
      let cost=0
      form.value.materialDetails.forEach(item=>{
        cost+=item.price
      })
      form.value.totalCost=cost.toString()
      console.log(form.value);
      post('/farmOperation/add',form.value).then(res=>{
        ElMessage({
          message: '新增成功',
          type: 'success',
        })
        dialogVisible.value = false
      }).catch(err=>{
        console.log('err',err);
        ElMessage.error(err.message)
      })
      //dialogVisible.value = false
    }
    function typeChange2(e){
      console.log(e);
      if(e=='收割'){
        sgHandleFlag.value=true
      }else{
        sgHandleFlag.value=false
      }
      form.value.collectCount=''
      form.value.materialDetails=[]
    }
    function submitSmall(){
      dialogVisible2.value=false
      form.value.materialDetails.push(
        JSON.parse(JSON.stringify(smallForm.value)) 
      )
      console.log('xxxxx',form.value.materialDetails)
    }
    function init(){
       form.value={
        materialDetails:[],
        
        "collectCount": '',
        "endTime": "",
        
        "content": "",
        "picUrls": [],
        "gardenId": '',
        "comment": "",
        "startTime": "",
        "totalCost": '',
        humanCost:'',
        "usingArea": "",
        "workerCount": '',
        isInput:0,
        
      }
    
 
    }
    const beforeUpload = (file) => {
      
        console.log('file',file);
        
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isLt2M) {
            ElMessage.error('上传图片大小不能超过 10MB！')
            return;
        }
        // if(fileList.value.length>1){
        //     ElMessage.error('只支持上传一个文件')
        //     return;
        // }
 
        //这个设置上传多个文件，可根据自己业务情况决定，本文只是上传一个
        if(fileList.value.length>3){
            ElMessage.error('只支持3个文件');
            return;
        }

 
        let fd = new FormData()
        // fileList.value.forEach(file2 => {
        //   console.log('file2',file2);
          
        //   fd.append('file', file2.raw);
  
        // });
        fd.append('file', file);
        //return
        post(uploadUrl,fd).then(res=>{
          if(form.value.picUrls.length<3){
            
             form.value.picUrls.push(res.data.sourceUrl)
            
          }else{
            ElMessage.error('最多上传三张图片')
          }
          
          
          
         
        })
       
        return false;
    }
    // 生命周期
    onMounted(() => {});

    onUnmounted(() => {
      //
    });

    //methods

    // return
    return {
      baseUrl,
      deleteSmall,
      submitSmall,
      smallForm,
      dialogVisible2,
      submit,
      sgHandleFlag,
      typeChange2,
      init,
      overFlag,
      farmResourceOption,
      farmCateChange,
      getFarmResourceCateOption,
      deletePic,
      beforeUpload,
      fileList,
      handleRemove,
      dialogVisible,
      form,
      areaOptions,
      manOptions,
      plotOptionList,
      typeOption,
      overFlag2,
      smallChange
    };
  },
});
</script>
  
  <style lang="scss">
  .gchildadd{
    display: inline-block;
    background:rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 4px;
    color: #fff;
    align-items: center;
    position: relative;
    margin-right: 10px;
    margin-bottom: 5px;
  }
  .deletenz{
    cursor: pointer;
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 16px;
  }
  .graycontent{
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    padding: 10px;
    height: 105px;
    flex-wrap: wrap;
  }
  .labelflex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .addbtnadd{
      cursor: pointer;
      font-size: 18px;
    }
  }
  .datewrap2{
    .el-date-editor.el-input{
      width: 150px!important;
    }
  }
  .zywrapfarm{
    .el-input{
      width: 535px;
    }
  }
  .mcontent{
    .el-select{
      width: 535px;
    }
  }
  .el-upload-list{
    margin:0!important;
  }
.m-2 {
  margin: 0 !important;
}
.infowrap3 {
  .el-input__wrapper,
  .el-textarea__inner {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none !important;
  }
  

  .el-select .el-input__wrapper {
    width: 535px;
    border: none !important;
    height: 33px;
    background: rgba(255, 255, 255, 0.08);
  }
  .el-select--large {
    line-height: 30px !important;
    height: 30px !important;
  }
}
.leftselect {
  .el-select .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;

  }
  .el-input{
    width: 200px!important;
  }
}
</style>

  <style lang="scss" scoped>
  .picwraps{
    position: relative;
    margin-right: 5px;
  }
  .closepic{
    position: absolute;
    right: 5px;
    top: -4px;
    cursor: pointer;
  }
@import "@/assets/scss/index.scss";
.reddian{
  color: red;
}
.datewrap{
  display: flex;
  align-items: center;
  .ksdiv{
    margin-right: 10px;
  }
  .zhi{
    margin: 0 10px;
  }
}
.zywrap {
  display: flex;
  .mcontent{
    flex: 1;
  }
  .mcontent2 {
    margin-right: 20px;
  }
}
.picset {
  display: flex;
  align-items: center;
  
  .xgsmall {
    margin-right: 10px;
    width: 130px;
    height: 90px;
  }
  .add {
    border-radius: 5px;
    width: 130px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
  }
}
.infowrap {
  .content4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .cchild {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 15px;
      padding: 20px;
      width: 24%;
      margin-top: 20px;
      margin-right: 10px;
      .big {
        font-size: 20px;
      }
      .p3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .p3child {
          width: 49%;
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .p3label {
            color: rgba(255, 255, 255, 0.6);
          }
          .num {
            font-weight: bold;
            font-size: 20px;
          }
        }
      }
      .p2 {
        display: flex;
        justify-content: space-around;
        .text {
          margin-left: 15px;
        }
        .p2left {
          display: flex;
          align-items: center;
          .name {
            font-weight: bold;
          }
          .label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
          }
        }
        .zz {
          width: 60px;
          padding: 3px;
          background: #fff;
          border-radius: 300px;
        }
      }
      .p1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .pbtn {
          display: flex;
          align-items: center;
          .pbnt1 {
            background: rgba(9, 127, 229, 1);
            border-radius: 5px;
            font-size: 10px;
            padding: 2px 15px;
            box-sizing: border-box;
            cursor: pointer;
          }
          .pbnt2 {
            background: rgba(255, 255, 255, 0.16) !important;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .panelben3 {
    margin-top: 20px;
  }
  .btnwrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;

    .btnc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 20px;
      padding: 10px 14px;
      margin-top: 10px;
      border-radius: 5px;
      background: rgba(9, 127, 229, 1);
      cursor: pointer;
    }
    .icon2 {
      width: 14px;
      margin-right: 6px;
    }
  }

  .content2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }
  .cc {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    flex-direction: column;
    padding: 15px;
    border-radius: 10px;
    width: 19%;
    .cct2 {
      display: flex;
      font-size: 30px;
      font-weight: bold;
      margin-top: 10px;
      align-items: center;
      .icon {
        width: 50px;
        margin-right: 12px;
      }
    }
  }
}
</style>
  